<template>
  <div class="efficiency-report-container">
    <el-card shadow="never">
      <template #header>
        <div class="card-header">
          <span>实施效率分析报表</span>
          <el-button type="primary" @click="handleExport">
            <el-icon><Download /></el-icon>
            导出报表
          </el-button>
        </div>
      </template>

      <!-- 统计卡片 -->
      <el-row :gutter="20" style="margin-bottom: 20px">
        <el-col :span="6">
          <el-card shadow="hover" class="stat-card">
            <el-statistic title="平均效率" :value="88" suffix="%">
              <template #prefix>
                <el-icon style="color: #409EFF"><TrendCharts /></el-icon>
              </template>
            </el-statistic>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card shadow="hover" class="stat-card">
            <el-statistic title="资源利用率" :value="92" suffix="%" />
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card shadow="hover" class="stat-card">
            <el-statistic title="按时交付率" :value="85" suffix="%" />
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card shadow="hover" class="stat-card">
            <el-statistic title="成本节约率" :value="15" suffix="%" />
          </el-card>
        </el-col>
      </el-row>

      <!-- 图表区域 -->
      <el-row :gutter="20">
        <el-col :span="12">
          <el-card shadow="hover" style="margin-bottom: 20px">
            <template #header>
              <span>效率趋势分析</span>
            </template>
            <v-chart :option="efficiencyTrendOption" style="height: 350px" />
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card shadow="hover" style="margin-bottom: 20px">
            <template #header>
              <span>人均效率对比</span>
            </template>
            <v-chart :option="personEfficiencyOption" style="height: 350px" />
          </el-card>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-card shadow="hover">
            <template #header>
              <span>项目周期分析</span>
            </template>
            <v-chart :option="cycleAnalysisOption" style="height: 400px" />
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card shadow="hover">
            <template #header>
              <span>成本效益分析</span>
            </template>
            <v-chart :option="costBenefitOption" style="height: 400px" />
          </el-card>
        </el-col>
      </el-row>

      <!-- 效率数据表格 -->
      <el-card shadow="hover" style="margin-top: 20px">
        <template #header>
          <span>效率详细数据</span>
        </template>
        <el-table :data="efficiencyData" border stripe>
          <el-table-column type="index" label="排名" width="60" align="center" />
          <el-table-column prop="name" label="项目名称" min-width="200" />
          <el-table-column prop="planDays" label="计划天数" width="100" align="center" />
          <el-table-column prop="actualDays" label="实际天数" width="100" align="center" />
          <el-table-column prop="efficiency" label="时间效率" width="120" align="center">
            <template #default="{ row }">
              <el-progress :percentage="row.efficiency" :status="row.efficiency >= 90 ? 'success' : ''" />
            </template>
          </el-table-column>
          <el-table-column prop="costEfficiency" label="成本效率" width="120" align="center">
            <template #default="{ row }">
              <el-progress :percentage="row.costEfficiency" :status="row.costEfficiency >= 90 ? 'success' : ''" />
            </template>
          </el-table-column>
          <el-table-column prop="qualityScore" label="质量评分" width="150">
            <template #default="{ row }">
              <el-rate v-model="row.qualityScore" disabled show-score />
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </el-card>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { LineChart, BarChart, ScatterChart } from 'echarts/charts'
import { TitleComponent, TooltipComponent, LegendComponent, GridComponent } from 'echarts/components'
import VChart from 'vue-echarts'
import { ElMessage } from 'element-plus'
import { Download, TrendCharts } from '@element-plus/icons-vue'

use([CanvasRenderer, LineChart, BarChart, ScatterChart, TitleComponent, TooltipComponent, LegendComponent, GridComponent])

const efficiencyData = ref([
  { name: 'XX集团ERP实施', planDays: 180, actualDays: 165, efficiency: 92, costEfficiency: 95, qualityScore: 4.5 },
  { name: 'YY公司财务系统', planDays: 120, actualDays: 115, efficiency: 96, costEfficiency: 93, qualityScore: 4.8 },
  { name: 'ZZ制造ERP项目', planDays: 240, actualDays: 200, efficiency: 83, costEfficiency: 88, qualityScore: 4.2 }
])

const efficiencyTrendOption = ref({
  tooltip: { trigger: 'axis' },
  legend: { data: ['效率指数', '资源利用率'] },
  grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
  xAxis: { type: 'category', data: ['1月', '2月', '3月', '4月', '5月', '6月'] },
  yAxis: { type: 'value', name: '百分比(%)', max: 100 },
  series: [
    { name: '效率指数', type: 'line', data: [82, 85, 86, 88, 89, 88], smooth: true },
    { name: '资源利用率', type: 'line', data: [88, 89, 90, 92, 93, 92], smooth: true }
  ]
})

const personEfficiencyOption = ref({
  tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
  grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
  xAxis: { type: 'value', name: '效率(%)', max: 100 },
  yAxis: { type: 'category', data: ['赵敏', '张伟', '李娜', '王强'] },
  series: [{
    name: '人均效率',
    type: 'bar',
    data: [88, 95, 92, 98],
    itemStyle: { color: '#67C23A' }
  }]
})

const cycleAnalysisOption = ref({
  tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
  legend: { data: ['计划周期', '实际周期'] },
  grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
  xAxis: { type: 'category', data: ['项目A', '项目B', '项目C', '项目D'] },
  yAxis: { type: 'value', name: '天数' },
  series: [
    { name: '计划周期', type: 'bar', data: [180, 120, 240, 150] },
    { name: '实际周期', type: 'bar', data: [165, 115, 200, 140] }
  ]
})

const costBenefitOption = ref({
  tooltip: { trigger: 'axis' },
  legend: { data: ['成本', '收益'] },
  grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
  xAxis: { type: 'category', data: ['Q1', 'Q2', 'Q3', 'Q4'] },
  yAxis: { type: 'value', name: '金额(万元)' },
  series: [
    { name: '成本', type: 'line', data: [100, 120, 140, 150], smooth: true },
    { name: '收益', type: 'line', data: [120, 150, 180, 200], smooth: true }
  ]
})

const handleExport = () => {
  ElMessage.success('报表导出成功')
}
</script>

<style scoped>
.efficiency-report-container {
  padding: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.stat-card {
  text-align: center;
}
</style>

